#@front_layout()
	
#define css()
	
#end

#define main()
<div id="bg" class="container bg">
	<div class="hide">
		<img id="pandaImg" src="#(ctx)/resources/img/panda.png" />
	</div>
	<canvas id="bgCanvas"></canvas>
</div>
#end

#define js()
<script>
	var pandaWidth = 100;
	var pandaHeight = 100;

	// 当前点
	var pandaPoint = {
			center: {x: pandaWidth / 2, y: pandaHeight / 2},
			current: {x: 0, y: 0},
			lt: function() {     // 左上
				return {x: this.center.x - pandaWidth / 2, y: this.center.y - pandaHeight / 2};
			},
			rt: function() {   // 右上
				return {x: this.center.x + pandaWidth / 2, y: this.center.y - pandaHeight / 2};
			},
			lb: function() {   // 左下
				return {x: this.center.x - pandaWidth / 2, y: this.center.y + pandaHeight / 2};
			},
			rb: function() { // 右下
				return {x: this.center.x + pandaWidth / 2, y: this.center.y + pandaHeight / 2};
			}
		};

	var bgCanvas = document.getElementById("bgCanvas");
	var bgCanvasCtx = bgCanvas.getContext("2d");
	bgCanvas.width = $("#bg").width();
	bgCanvas.height = $("#bg").height();
	
	var pandaImg = document.getElementById("pandaImg");
	bgCanvasCtx.drawImage(pandaImg, 0, 0, pandaWidth, pandaHeight, 0, 0, pandaWidth, pandaHeight);
	
	bgCanvas.oncontextmenu = function(ev){
		var x = ev.clientX - $("#bg").offset().left;
		var y = ev.clientY - $("#bg").offset().top;
		
		var deltaX = x - pandaPoint.center.x;
		var deltaY = y - pandaPoint.center.y;
		if(deltaX > 0) {  // 向右
			var surplusX = deltaX % pandaWidth;
			var pandaStepX = (deltaX - surplusX) / pandaWidth;
			for(var i = 1; i < pandaStepX; i++) {
				pandaPoint.center.x = pandaPoint.center.x + pandaWidth;
				pandaPoint.current.x = (pandaPoint.current.x + 1) % 4;
				bgCanvasCtx.fillStyle = $("#bg").css("background-color");
				bgCanvasCtx.fillRect(pandaPoint.lt().x - pandaWidth, pandaPoint.lt().y, pandaWidth, pandaHeight);
				bgCanvasCtx.drawImage(pandaImg, pandaPoint.current.x * pandaWidth, pandaHeight * 2, pandaWidth, pandaHeight, pandaPoint.lt().x, pandaPoint.lt().y, pandaWidth, pandaHeight);
			}
			
			var surplusY = deltaY % pandaHeight;
			var pandaStepY = (deltaY - surplusY) / pandaHeight;
			for(var i = 1; i < pandaStepY; i++) {
				pandaPoint.center.y = pandaPoint.center.y + pandaHeight;
				pandaPoint.current.x = (pandaPoint.current.x + 1) % 4;
				bgCanvasCtx.drawImage(pandaImg, pandaPoint.current.x * pandaWidth, 0, pandaWidth, pandaHeight, pandaPoint.lt().x, pandaPoint.lt().y, pandaWidth, pandaHeight);
			}
			
			
			if(deltaY > 0) {  // 向下
			} else if(deltaY < 0) {  // 向上
				
			}
		} else if(deltaX < 0) {  // 向左
			if(deltaY > 0) {  // 向下
				
			} else if(deltaY < 0) {  // 向上
				
			}
		}
		
        
		bgCanvasCtx.drawImage(pandaImg, 0, 0, 100, 100, 0, 0, 100, 100);
		
		
		pandaPoint.center = {x: x, y: y};
		
		ev.preventDefault();
    }
</script>
#end